<template>
	<view class="w100 h100">
		<view class="w100 h100">
			<view class="card c3 mb10 cshow" v-for="(form,index) in orderList" :key="index" @click="toDtail(form)">
				<view class="bd1 dfa pb10">
					<view class="f-c-s f-1">
						<view class="c0 dfa" v-if="form.drink">
							<image class="pplg" :src="form.drink.logo" mode="" v-if="form.drink.logo" />
							<text class="f16 wei6 f-1">品牌:{{form.drink.name}}</text>
						</view>
						<view class="f10 c6 mt5">寄存时间:{{form.created_at}}</view>
					</view>
					<view class="f-c-e wei6">
						<view>
							<!-- <view class="c0 mt5" v-if="form.user && form.user.mobile">尾号{{form.user.mobile.substr(form.user.mobile.length-4)}}</view> -->
							<view class="c0 mt5">剩余<text :style="{color:subColor}">{{form.residue}}{{form.drink && form.drink.unit}}</text></view>
						</view>
						<text class="f10 p5 c9 bf8 mt5 bs5" :style="{background:form.state==1? subColor:'',color:form.state==1? '#000':''}">{{form.stateFormat}}</text>
					</view>
				</view>
				<view class="mt10 f-bt bd1 pb10" v-if="form.user">
					<view class="dfa f-g-1">
						<view class="f-e-c">
							<text class="c3">{{form.user.nickname}}</text>
							<text class="f10 c9 mt5">{{form.user.mobile}}</text>
						</view>
					</view>
					<view class="f-g-0 mr10" @click.stop="tocenter(form.user.mobile)">
						<u-icon name="phone-fill" color="#000" size="30"></u-icon>
					</view>
				</view>
				<view class="mt10 f-s bf8 p10 bs6 mb10 f12" style="background: #F6F6F6;">
					<view>
						<view class="mb5 c6">寄存门店<text class="ml10 c0 wei">{{form.store && form.store.name}}</text></view>
						<view class="mb5 c6">剩余数量<text class="ml10 c0 wei">{{form.residue}} {{form.drink && form.drink.unit}} {{form.drink && form.drink.name}}</text></view>
						<view class="mb5 c6">寄存时间<text class="ml10 c0 wei">{{form.created_at}}</text></view>
						<view class="mb5 c6">寄存数量<text class="ml10 c0 wei">{{form.num}} {{form.drink && form.drink.unit}} {{form.drink && form.drink.name}}</text></view>
						<view class="mb5 c6">过期时间<text class="ml10 c0 wei">{{form.expiredTimeFormat}}</text></view>
					</view>
				</view>
				<view class="dfbc">
					<view class="f12">
						<view class="mb5">操作人：<text v-if="form.admin">{{form.admin.nickname}}</text></view>
						<view class="mb5">订单来源：{{form.scoreFormat}}</view>
						<view class="mb5">订单编号：{{form.orderSn}}</view>
					</view>
				</view>
				<view class="f-x-e mt10 pt10 bt1">
					<view class="f-g-0 w50 p-0-10" @click.stop="$emit('op','orderPrint',form)">
						<u-button type="primary" :plain="true" :customStyle="{marginLeft: '20rpx',color:'#000'}" 
							text="打印" color="#e4e4e4" shape="circle">
						</u-button>
					</view>
					<view class="f-g-0 w50 p-0-10" @click.stop="$emit('op','take',form)" v-if="form.state==1">
						<u-button type="primary" :customStyle="{marginLeft: '20rpx',color:'#000'}" 
							text="取出" :color="subColor" shape="circle">
						</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			orderList: {
				type: Array,
				default () {
					return []
				}
			},
			current: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
			}
		},
		methods: {
			tocenter(e) {
				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			toDtail(v) {
				uni.navigateTo({
					url: `/pages/order/cjdetail?id=${v.id}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pplg{
		width: 60rpx;
		height: 60rpx;
		margin-right: 10rpx;
		border-radius: 50%;
	}
</style>